import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import {
  Form,
  Input,
  Select,
  Button,
  Card,
  message,
  Icon,
  Tooltip,
  Modal,
  InputNumber,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import {ruleP, nameMaxLength,remarkMaxLength} from '@/utils/rule'
const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ upload, loading }) => ({
  upload,
  loading: loading.models.upload,
}))

@Form.create()
class upload extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'upload/queryList',
    });
  }

  handleSubmit = fields => {
    const { dispatch, form } = this.props;
    fields.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.submit(values)
      }
    });
  };



// 提交
  submit(fields) {
    const {
      dispatch,
      upload: { data },
    } = this.props;
    const values = {
      fileMaxUploadSize: fields.fileMaxUploadSize,
      supportUploadType: fields.supportUploadType,
      remark: fields.remark,
    };
    dispatch({
      type: 'upload/submit',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({
            title: res.msg,
          });
          dispatch({
              type: 'upload/queryList',
            }
          );
        }else {
          Modal.error({
            title: '操作失败',
            content: res.msg,
          });
        }
      },
    });
  }


  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
      submitting,
      upload: { data},
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper title="上传管理">
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
          <FormItem {...formItemLayout} label="系统名称：">
            <span className="ant-form-text">数据安管追溯系统</span>
          </FormItem>

          <FormItem {...formItemLayout} label="单个文件大小：">
            不超过&nbsp;&nbsp;
            {getFieldDecorator('fileMaxUploadSize',{rules:[{required: true,message:'文件大小不能为空'}],initialValue: data&&data.fileMaxUploadSize||''})(
              <InputNumber min={0} max={4096} step={5} placeholder="最大4G" style={{width:'150px'}} />
                )
            }
            &nbsp;&nbsp;M
          </FormItem>


          <FormItem {...formItemLayout} label="可上传文件类型：">
            {getFieldDecorator('supportUploadType',{rules:[{required: true,message:'文件类型不能为空'}],initialValue: data&&data.supportUploadType||''})(
              <TextArea
                style={{minHeight: 32}}
                placeholder="用英文逗号隔开,例如doc,ppt,pdf"
                rows={3}
              />)}
          </FormItem>

          <FormItem {...formItemLayout} label="备注：">
            {getFieldDecorator('remark',{rules:[{max:remarkMaxLength()[0],message:remarkMaxLength()[1]}],initialValue: data&&data.remark||''})(
              <TextArea
                style={{minHeight: 32}}
                rows={2}
              />)}
          </FormItem>

          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              <FormattedMessage id="form.submit" />
            </Button>
           {/* <Button style={{ marginLeft: 8 }}>
              <FormattedMessage id="form.save" />
            </Button>*/}
          </FormItem>
        </Form>
      </Card>
      </PageHeaderWrapper>
    );
  }
}

export default upload;
